import React, {useState,useEffect} from "react";
import * as S from "../Home/styles";
import {Statisticslist} from "./StatisticsList";
import {Modal,Pressable,Image} from 'react-native';
import AsyncStorage from "@react-native-async-storage/async-storage";

const MadalScreen = ({modalVisible,setModalVisible}:any)=>{

  const [ pageNmu,setPageNum ] = useState(1)
  
  return(
    <Modal
      visible={modalVisible}
      transparent={false}
      animationType="fade"
      >
      <Pressable style={{flex:1,backgroundColor:'rgba(0, 0, 0, 0.72)',paddingTop:Platform.OS=='ios'? 0 :0}} onPress={()=>{
        setPageNum(pre=>pre+1)
        // Alert.alert(JSON.stringify(pageNmu))
        if(pageNmu>=1){
          setModalVisible(false)
          AsyncStorage.setItem('guideStatistics','1')
        }
      }}>
        {/* <ImageBackground
          style={{flex:1,backgroundColor:'red'}}
          source={require("../../assets/guidePage/home_1.png")}
        ></ImageBackground> */}
        {
          pageNmu == 1 
          ?
          <Image
            style={{width:'100%',height:"100%",}}
            source={require("../../assets/guidePage/statistics_1.png")}
          />
          :
          ''
        }



      </Pressable>
    </Modal>
    
  )
}


const Statistics = (props) => {
    const [modalVisible, setModalVisible] = useState(false);
    const fetchData =  async ()=>{
        let guideStatistics = await AsyncStorage.getItem('guideStatistics')
        if(!guideStatistics){
        setModalVisible(true)
        }
    }
    useEffect(() => {
        // init()
        // AsyncStorage.removeItem('guideStatistics')
        fetchData()
        return () => {
        };
    }, []);

    return (
        <S.GrayContainer style={{paddingTop:0,paddingBottom:0}}>
            <Statisticslist {...props}/>
            <MadalScreen modalVisible={modalVisible} setModalVisible={setModalVisible}/>
        </S.GrayContainer>
    )
};

export default Statistics;
